<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '排行榜',
	},
}
</route>

<template>
	<view class="page-exercise">
		<fly-navbar
			:backgroundColor="paperResultsInfo && pageInfo.thisPage === 1 ? 'transparent' : '#fff'"
			:leftText="paperResultsInfo?.paper_name || '练习题'"
			:textColor="paperResultsInfo && pageInfo.thisPage === 1 ? '#fff' : '#303030'"
			fixed
		/>
		<image
			class="w-full h-full fixed top-0 left-0 z-1"
			:src="baseImg + '/book/book-exercise-bg.jpg'"
		></image>
		<view
			class="w-full h-[100vh] absolute top-0 left-0 z-2 box-border"
			:style="{ paddingTop: barAlbright + 'rpx' }"
		>
			<scroll-view
				scroll-y
				class="w-full h-full box-border"
				v-if="paperResultsInfo && pageInfo.thisPage === 1"
			>
				<view class="w-full pt-[207rpx] pb-[65rpx] px-[34rpx] box-border">
					<view
						v-if="paperType === 'result'"
						class="w-full bg-white min-h-[400rpx] rounded-[33rpx] flex flex-col items-center paper-item px-[81rpx] pb-[67rpx] box-border"
					>
						<view class="-mt-[46rpx] w-full flex justify-center items-center relative">
							<image
								class="w-[341rpx] h-[128rpx]"
								:src="baseImg + '/book/paper-success.png'"
							></image>
							<image
								class="w-[176rpx] h-[176rpx] absolute bottom-0 left-[50%] -translate-x-[50%] rounded-[50%] border-2 border-solid border-[#FDB70D]"
								:src="userInfo.avatar || baseImg + '/user-default.png'"
							></image>
						</view>
						<view class="w-full pt-[51rpx]">
							<view class="w-full flex justify-center items-center">
								<image
									class="w-[124rpx] h-[124rpx]"
									v-for="item in [1, 2, 3]"
									:key="item"
									:src="
										item <= paperResultsInfo.start_number
											? baseImg + '/book/paper-star.png'
											: baseImg + '/book/paper-star-gray.png'
									"
								></image>
							</view>
							<text
								class="text-[#303030] w-full inline-block text-center text-[44rpx] mt-[34rpx] font-bold"
								>本站答题获得{{ paperResultsInfo.start_number }}颗星</text
							>
							<view
								class="w-full flex justify-between items-center px-[48rpx] box-border mt-[75rpx]"
							>
								<view class="flex flex-col items-center">
									<text class="text-[#F1B208] text-[47rpx]">{{
										paperResultsInfo.right_pecent
									}}</text>
									<text class="text-[#919191] text-[25rpx] mt-[10rpx]">正确率</text>
								</view>
								<view class="flex flex-col items-center">
									<text class="text-[#3EC34B] text-[47rpx]">100</text>
									<text class="text-[#919191] text-[25rpx] mt-[10rpx]">完成度</text>
								</view>
								<view class="flex flex-col items-center">
									<text class="text-[#3EC34B] text-[47rpx]">{{
										formatTime(paperResultsInfo.answer_time, `m's`, false)
									}}</text>
									<text class="text-[#919191] text-[25rpx] mt-[10rpx]">答题用时</text>
								</view>
							</view>
							<view
								class="w-full rounded-[33rpx] px-[47rpx] py-[43rpx] box-border mt-[52rpx]"
								style="background: #f6f7f9"
							>
								<text class="text-[#303030] text-[32rpx] font-bold">答题卡</text>
								<view class="w-full mt-[22rpx] grid grid-cols-6 gap-x-2 gap-y-2">
									<view
										v-for="(item, index) in paperResultsInfo.answer"
										:key="index"
										class="text-[#fff] w-full h-[63rpx] text-[32rpx] font-bold inline-flex rounded-[8rpx] justify-center items-center"
										:style="{ background: item === 1 ? '#3EC34B' : '#F8745D' }"
										>{{ index + 1 }}</view
									>
								</view>
								<text
									class="text-[#3DA5E3] text-[29rpx] font-bold mt-[47rpx] block"
									@tap="checkAnalysis"
									>查看解析</text
								>
							</view>
							<view
								:class="[
									'w-full grid gap-x-[26rpx] mt-[105rpx]',
									paperResultsInfo.is_full_right === 2 ? 'grid-cols-2' : 'grid-cols-1',
								]"
							>
								<view
									v-if="paperResultsInfo.is_full_right === 2"
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#303030] text-[32rpx]"
									style="background: #f0f1f3"
									@tap="again"
									>再来一次</view
								>
								<view
									class="w-full h-[111rpx] relative rounded-[55rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
									style="background: #fbb62f"
									@tap="submit"
									>完成测试
									<view class="text-[25rpx] text-[#fff] ml-[5rpx]" v-if="paperResultsInfo.integral">
										+{{ paperResultsInfo.integral }}
										<image
											:src="baseImg + '/book/paper-point.png'"
											class="w-[34rpx] h-[34rpx] ml-[5rpx]"
										></image>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view
						v-else
						class="w-full bg-white relative min-h-[400rpx] rounded-[33rpx] flex flex-col items-center paper-item px-[35rpx] pb-[46rpx] box-border"
					>
						<image
							class="w-[170rpx] h-[211rpx] rounded-[25rpx] -mt-[85rpx] border-1 border-solid border-[#fff] paper-image"
							:src="paperResultsInfo.book_cover_img"
						></image>
						<view class="w-full pt-[27rpx]">
							<book-paper :list="paperDetailsInfo" :current="current" type="check"></book-paper>
							<view
								:class="[
									'w-full',
									'grid',
									current <= 1 ? 'grid-cols-1' : 'grid-cols-2 gap-x-[26rpx]',
									'mt-[87rpx]',
								]"
							>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#303030] text-[32rpx]"
									style="background: #f0f1f3"
									@tap="prev"
									v-if="current > 1"
									>上一题</view
								>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
									style="background: #3aa2e4"
									@tap="next"
									v-if="current < paperDetailsInfo.length"
									>下一题</view
								>
								<view
									class="w-full h-[111rpx] rounded-[55rpx] flex justify-center items-center text-[#fff] text-[32rpx]"
									style="background: #3aa2e4"
									@tap="goResult"
									v-if="current === paperDetailsInfo.length"
									>返回结果</view
								>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="pageInfo.thisPage === 0"
				height="100%"
				:type="pageInfo.type"
				:title="pageInfo.title"
				:btnTitle="pageInfo.btnTitle"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { systemInfo } from '@/utils/getSystemInfo';
import { useUserStore } from '@/store';
import { formatTime } from '@/utils';
import { toAuthPage } from '@/utils/jump';
import { getPaperInfoResult, addPaperInfoPoint, getPaperInfoAnalysis } from '@/service/book';
import onShare from '@/hooks/useShare';
import BookPaper from '../../components/book-paper.vue';

const paperResultsInfo = ref(null);
const paperDetailsInfo = ref(null);
const current = ref(1);
const paperType = ref('result');

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline, setShareInfo } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const barAlbright = ref(0);
const query = ref(null);
const pageInfo = ref<{ thisPage: number; title: string; type: string; btnTitle?: string }>({
	thisPage: -1,
	title: '暂无数据',
	type: 'btn',
	btnTitle: '重试',
});

onLoad(options => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		pageInfo.value = {
			thisPage: 0,
			type: 'btn',
			title: '还没有登录',
			btnTitle: '登录',
		};
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	// 测练 answer_id
	if (options.answer_id) {
		query.value = options;
	} else {
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常',
			type: 'msg',
		};
	}
});

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (query.value.answer_id) {
		getResult();
	}
});

const getResult = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPaperInfoResult({
			student_id: userInfo.value.student_id,
			exam_anser_id: Number(query.value.answer_id),
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			pageInfo.value.thisPage = 1;
			paperResultsInfo.value = res.data;
			uni.showShareMenu();
			setShareInfo({
				path: res.data.book_id
					? `/pages-book/details/index?id=${res.data.book_id}`
					: '/pages/index/index',
			});
		} else {
			uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
			uni.showToast({
				icon: 'none',
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
			});
			pageInfo.value = {
				thisPage: 0,
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
				type: 'btn',
			};
		}
	} catch (error) {
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		uni.hideLoading();
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常,请重试',
			type: 'btn',
		};
	}
};

const checkAnalysis = async () => {
	if (paperDetailsInfo.value) {
		paperType.value = 'analysis';
		return;
	}
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPaperInfoAnalysis({
			student_id: userInfo.value.student_id,
			exam_anser_id: Number(query.value.answer_id),
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			paperType.value = 'analysis';
			paperDetailsInfo.value = res.data;
		} else {
			uni.showToast({
				icon: 'none',
				title: res.status_code !== 200 ? res.message : '查询异常,请重试',
			});
		}
	} catch (error) {
		uni.hideLoading();
		pageInfo.value = {
			thisPage: 0,
			title: '查询异常,请重试',
			type: 'btn',
		};
	}
};

const retry = () => {
	if (!userInfo.value.student_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'switchTab', url: '/pages/index/index' });
		return;
	}
	getResult();
};

const prev = () => {
	current.value--;
};
const next = () => {
	current.value++;
};

const goResult = () => {
	paperType.value = 'result';
};

const submit = async () => {
	if (!paperResultsInfo.value.integral) {
		uni.navigateBack({
			delta: 1,
		});
	} else {
		uni.showLoading({
			title: '领取中...',
		});
		try {
			const res = await addPaperInfoPoint({
				student_id: userInfo.value.student_id,
				exam_anser_id: Number(query.value.answer_id),
			});
			uni.hideLoading();
			if (res.status_code === 200) {
				uni.showToast({
					icon: 'none',
					title: '领取成功',
				});
				uni.navigateBack({
					delta: 1,
				});
			} else {
				uni.showToast({
					icon: 'none',
					title: res.status_code !== 200 ? res.message : '领取失败',
				});
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({
				icon: 'none',
				title: '领取失败',
			});
		}
	}
};
const again = () => {
	// 获取页面栈
	const pages = getCurrentPages();
	if (pages.length > 1 && pages[pages.length - 2].route === 'pages-book/exercise/index') {
		uni.navigateBack({
			delta: 1,
		});
	} else {
		uni.redirectTo({
			url: `/pages-book/exercise/index?id=${paperResultsInfo.value.paper_id}${query.value.plan_id ? `&plan_id=${query.value.plan_id}` : ''}`,
		});
	}
};
</script>

<style lang="scss" scoped>
.page-exercise {
	.paper-item {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}

	.paper-image {
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
	}
}
</style>
